<template>
  <div id="healthInformation" class="person-detail">
    <div>
      <van-nav-bar title="健康咨询" :fixed="true" left-arrow @click-left="back" />
    </div>
    <div class="healthInformation-body">
      <div class="skillsTraining-search">
        <van-search placeholder="搜索文章" v-model="value" @input.native="search" />
      </div>
      <div>
        <van-dropdown-menu>
          <van-dropdown-item v-model="value1" :options="option1" @change="selecDepts" />
          <van-dropdown-item v-model="value2" :options="option2" @change="selecDate" />
        </van-dropdown-menu>
      </div>
      <div>
        <van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">
          <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <div v-for="(item, index) in healthDetais" :key="index" class="communityHealth-list" @click="
              $router.push({
                path: '/work/communityHealth/healthInformationDetails',
                query: {
                  id: item.id
                }
              })
            ">
              <img :src="item.headImage" alt="" />
              <div class="communityHealth-list-details">
                <p>
                  {{ item.subject }}
                </p>
                <span>{{ item.creationDate }}</span>
              </div>
            </div>
          </van-list>
        </van-pull-refresh>
      </div>
    </div>
  </div>
</template>
<script>
  import mine from "../../../../controller/mine";
  import constant from "@/controller/constant.js";
  export default {
    name: "healthInformation",
    components: {},
    data() {
      return {
        loading: false,
        finished: false,
        isLoading: false,
        count: 1,
        value: "",
        value1: 0,
        value2: "a",
        option1: [{
          text: "全部",
          value: 0
        }],
        option2: [{
            text: "最新",
            value: "a"
          },
          {
            text: "最近一个月",
            value: "b"
          },
          {
            text: "最近半年",
            value: "c"
          }
        ],
        healthDetais: []
      };
    },
    computed: {},
    created() {},
    mounted() {
      this.getDepts();
    },
    methods: {
      onLoad() {
        this.getInfo();
      },
      search() {
        this.healthDetais = []
        this.count = 1
        this.getInfo()
      },
      selecDepts() {
        this.healthDetais = []
        this.count = 1
        this.getInfo();
      },
      selecDate() {
        this.healthDetais = []
        this.count = 1
        this.getInfo();
      },
      onRefresh() {
        this.healthDetais = []
        this.count = 1;
        this.getInfo();
      },
      getDepts() {
        mine.healthInfo_v1_getDepts().then(res => {
          if (res.code == "0") {
            if (res.datas != null) {
              res.datas.forEach((item, index) => {
                let obj = {
                  text: item,
                  value: index + 1
                };
                this.option1.push(obj);
              });
            }
          } else {
            this.$toast(res.msg);
          }
        });
      },
      returnObj(id) {
        let that = this,
          a
        if (1 == id) {
          that.option1.forEach(item => {
            if (item.value == that.value1) {
              a = item.text;
            }
          });
        } else {
          that.option2.forEach(item => {
            if (item.value == that.value2) {
              a = item.text;
            }
          });
        }
        return a
      },
      debounce(func, wait) {
        let timer;
        return function () {
          let context = this; // 注意 this 指向
          let args = arguments; // arguments中存着e

          if (timer) clearTimeout(timer);

          timer = setTimeout(() => {
            func.apply(context, args)
          }, wait)
        }
      },
      getInfo() {
        let data = {
          condition: this.value,
          curPage: this.count,
          dateStr: this.value2 == "a" ? '' : this.returnObj(2) ? this.returnObj(2) : '',
          departmentName: this.value1 == 0 ? '' : this.returnObj(1) ? this.returnObj(1) : '',
          pageSize: (this.count) * 10
        };
        mine.healthInfo_v1_searchFront(data).then(res => {
          if (res.code === "0") {
            if (
              (res.datas && res.datas.records.length === 0) ||
              res.datas === null
            ) {
              this.loading = false;
              this.isLoading = false;
              this.finished = true;
              return;
            }
            this.healthDetais = [...this.healthDetais, ...res.datas.records];
            this.$nextTick(() => {
              this.loading = false;
              this.isLoading = false;
            });
            if (res.datas.records.length < (this.count) * 10) {
              this.finished = true;
            }
          } else {
            if (res && res.msg) {
              this.$toast(res.msg);
            } else {
              this.$toast(constant.unusualMsg);
            }
          }
        });
      },
      back() {
        this.$router.go(-1);
      }
    }
  };
</script>
<style lang="scss">
  #healthInformation {
    p {
      margin: 5px 0;
    }

    background: #fff;

    .healthInformation-body {
      padding: 0 20px;

      .skillsTraining-search {}
    }

    .communityHealth-list {
      display: flex;
      padding: 10px;
      border-bottom: 1px solid #e2e2e2;

      img {
        width: 60px;
        height: 60px;
      }
    }

    .communityHealth-list-details {
      margin-left: 10px;

      >p:nth-child(1) {
        font-size: 14px;
        font-weight: 500;
      }

      >span:nth-child(2) {
        font-size: 12px;
        opacity: 0.5;
      }
    }

    .van-search {
      padding-left: 0;
      padding-right: 0;
    }
  }
</style>